<template>
  <div class="list" ref="wrapper">
    <div>
        <div class="area">
          <div class="curr-city">
            <p class="border-topbottom">当前城市</p>
            <div class="current">
              <button>北京</button>
            </div>
          </div>
          <div class="hot-city">
            <p class="border-topbottom">热门城市</p>
            <div class="hot">
              <button>北京</button>
              <button>上海</button>
              <button>西安</button>
              <button>三亚</button>
              <button>丽江</button>
              <button>桂林</button>
            </div>
          </div>
        </div>
        <div class="area-two">
          <div class="font-city">
          <p class="border-topbottom">A</p>
          <div class="current">
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
            <div class="item-list border-bottom">安庆</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CityList',
  mounted(){
    // console.log(this.$refs.wrapper);
    this.scroll=new BScroll(this.$refs.wrapper);
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/css/varibles.styl'
.border-topbottom
  &::before
    border-color #ccc
  &::after
    border-color #ccc
.border-bottom
  &::before
    border-color #ccc
.list
  position absolute
  top 1.7rem
  left 0
  right 0
  bottom 0
  overflow hidden
  // overflow-y scroll
.curr-city
  border-bottom 1px solid  #eef1f3
  border-top 1px solid  lightgray
.curr-city p 
  background-color #eee
  font-size .26rem
  padding .1rem .2rem 
.curr-city .current
  background #ffffff
  width 100%
  height .8rem
  line-height .8rem
  padding-left .2rem 
  padding-bottom .04rem 
.curr-city .current button 
  border 1px solid #cccccc
  padding .1rem .68rem 
  background-color #ffffff
  border-radius .1rem 
.hot-city
  border-bottom 1px solid  #eef1f3
  border-top 1px solid  #eef1f3
.hot-city p 
  background-color #eee
  font-size .26rem
  padding .1rem .2rem
.hot-city .hot
  background #ffffff
  width 100%
  height .8rem
  line-height .8rem
  // padding-left .2rem
  // overflow hidden //溢出隐藏，清除浮动
  padding-bottom .04rem 
.hot-city .hot button 
  border 1px solid #cccccc
  padding .1rem .68rem 
  background-color #ffffff
  border-radius .1rem 
  margin-left .2rem
.area
  height 3.5rem
.font-city
  border-bottom 1px solid  #eef1f3
.font-city p 
  background-color #eee
  font-size .26rem
  padding .1rem .2rem 
.font-city .current
  background #ffffff
  width 100%
  height .66rem
  line-height .66rem
  padding-bottom .04rem 
.font-city .current .item-list
  line-height .72rem
  padding-left .2rem 
  font-size .28rem
  color #666
</style>